<template>
  <view id="inventoryStatistics">
    <header>
      <image src="@/static/img/largeScreen/title-txt.png" />
      <view id="top">库存统计</view>
      <view class="time">
        <view class="h_s">{{ time }}</view>
        <view class="day">
          <p>{{ week }}</p>
          <p>{{ day }}</p>
        </view>
      </view>
      <view class="handle_box flex">
        <view class="select">
          <uni-data-select
            v-model="GodownCode"
            placeholder="仓库"
            :localdata="userStore.warehouseList.Stashlist"
            :clear="false"
            @change="change"
          >
          </uni-data-select>
        </view>
        <view @tap="goSetSA" class="Address fs_14"> 地址配置 </view>
      </view>
    </header>
    <view id="list_box">
      <view class="content">
        <view class="list_title flex">
          <view class="title_left flex">
            <view
              :class="[active == 'first' ? 'active' : '']"
              @tap="changeList('first')"
              class="Btn fs_20"
            >
              批次数量
            </view>
            <view
              @tap="changeList('second')"
              :class="[active == 'second' ? 'active' : '']"
              class="Btn fs_20"
            >
              物资数量
            </view>
          </view>

          <view class="title_right flex">
            <view class="select">
              <uni-data-select
                v-model="GoodsType"
                placeholder="物资类型"
                :localdata="userStore.TypeList.typeList"
                clear
              >
              </uni-data-select>
            </view>
            <uni-transition
              ref="secondanimation"
              mode-class="fade"
              :duration="500"
              :show="active == 'first'"
            >
              <view class="select">
                <view class="Location flex">
                  <view @tap="openTreePicker" class="fs_12 text_overflow text">
                    {{ BoxName || "库位" }}
                  </view>
                  <uni-icons
                    @tap="openTreePicker"
                    v-if="!BoxName"
                    type="down"
                    color="#00f4e0"
                    size="14"
                  />
                  <uni-icons
                    @tap="clearBoxName"
                    v-else
                    type="clear"
                    color="#00f4e0"
                    size="24"
                  />
                </view>
              </view>
            </uni-transition>

            <view class="input">
              <uni-easyinput
                placeholderStyle="color: #00f4e080 !important;"
                v-model="searchParam"
                placeholder="物资名称"
              >
              </uni-easyinput>
            </view>

            <zk-btn
              iconColor="#0b525a"
              iconType="search"
              color="#0b525a"
              backgroundColor="#00f4df"
              @handleTap="search"
            >
              查询
            </zk-btn>
          </view>
        </view>
        <view class="list">
          <!-- 列表一 -->
          <uni-transition
            ref="firstanimation"
            mode-class="slide-left"
            :duration="500"
            :styles="{
              width: '100%',
              height: '100%',
            }"
            :show="active == 'first'"
          >
            <view class="table_box">
              <!-- 头部 -->
              <view class="table_header">
                <view class="table_header_item">
                  <!-- 表头 -->
                  <view
                    class="title fs_16"
                    v-for="(item, index) in firstStore.firstTableHeader"
                    :key="index"
                  >
                    {{ item }}
                  </view>
                </view>
              </view>
              <!-- 表格 -->
              <scroll-view scroll-y>
                <view
                  v-if="firstStore.firstList.list.length !== 0"
                  class="table_body"
                >
                  <view
                    v-for="(item, index) in firstStore.firstList.list"
                    :key="item.Uuid"
                    class="table_body_item"
                  >
                    <!-- 物资名称 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.GoodsName }}
                      </view>
                    </view>
                    <!-- 物资别名 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.GoodsAlias }}
                      </view>
                    </view>
                    <!-- 规格 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.Specs }}
                      </view>
                    </view>
                    <!-- 类型 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.GoodsTypeName }}
                      </view>
                    </view>
                    <!-- 生产厂家 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.Manufacturer }}
                      </view>
                    </view>
                    <!-- 批次 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.GoodsBatch }}
                      </view>
                    </view>
                    <!-- 有效期 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.ExpirationDate }}
                      </view>
                    </view>
                    <!-- 产地 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.Native }}
                      </view>
                    </view>
                    <!-- 品牌 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.Brand }}
                      </view>
                    </view>
                    <!-- 数量 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.GoodsNumber }}
                      </view>
                    </view>
                    <!-- 单位 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.Units }}
                      </view>
                    </view>
                    <!-- 库位 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.BoxName }}
                      </view>
                    </view>
                  </view>
                </view>
              </scroll-view>
              <view class="pagination">
                <zk-pagination
                  :range="range"
                  :total="firstStore.firstTotalCount"
                  @event-change="handlePageChange"
                >
                </zk-pagination>
              </view>
              <zk-tips></zk-tips>
            </view>
          </uni-transition>
          <!-- 列表二 -->
          <uni-transition
            ref="secondanimation"
            mode-class="slide-right"
            :duration="500"
            :styles="{
              width: '100%',
              height: '100%',
            }"
            :show="active == 'second'"
          >
            <view class="table_box second_table_box">
              <!-- 头部 -->
              <view class="table_header">
                <view class="table_header_item">
                  <!-- 表头 -->
                  <view
                    class="title fs_16"
                    v-for="(item, index) in secondStore.secondTableHeader"
                    :key="index"
                  >
                    {{ item }}
                  </view>
                </view>
              </view>
              <!-- 表格 -->
              <scroll-view scroll-y>
                <view
                  v-if="secondStore.secondListData.secondList.length !== 0"
                  class="table_body"
                >
                  <view
                    v-for="(item, index) in secondStore.secondListData
                      .secondList"
                    :key="item.Uuid"
                    class="table_body_item"
                  >
                    <!-- 物资名称 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.GoodsName }}
                      </view>
                    </view>
                    <!-- 物资别名 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow"
                        >{{ item.GoodsAlias }}
                      </view>
                    </view>
                    <!-- 规格 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.Specs }}
                      </view>
                    </view>
                    <!-- 类型 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.GoodsTypeName }}
                      </view>
                    </view>
                    <!-- 生产厂家 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.Manufacturer }}
                      </view>
                    </view>

                    <!-- 产地 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.Native }}
                      </view>
                    </view>
                    <!-- 品牌 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.Brand }}
                      </view>
                    </view>
                    <!-- 数量 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.GoodsNumberSum }}
                      </view>
                    </view>
                    <!-- 单位 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.Units }}
                      </view>
                    </view>
                    <!-- 库位 -->
                    <view class="table_body_item_cell text_overflow">
                      <view class="fs_14 text_overflow">
                        {{ item.BoxName }}
                      </view>
                    </view>
                  </view>
                </view>
              </scroll-view>
              <view class="pagination">
                <zk-pagination
                  :range="range"
                  :total="secondStore.secondTotalCount"
                  @event-change="handlePageChange"
                >
                </zk-pagination>
              </view>
              <zk-tips></zk-tips>
            </view>
          </uni-transition>
        </view>
      </view>
    </view>
  </view>
  <zk-treePicker
    @cancel="cancelTreePicker"
    ref="treePicker"
    confirmColor="#0097ac"
    @select-change="selectChange"
    title="请选择库位"
    :localdata="userStore.LocationList.locationList"
    valueKey="BoxCode"
    textKey="BoxName"
    childrenKey="children"
  ></zk-treePicker>
</template>

<script lang="ts" setup>
import { useFirstListStore } from "@/stores/modules/inventoryStatistics/firstlist";
import { usesecondListStore } from "@/stores/modules/inventoryStatistics/secondlist";
import { useMemberStore } from "@/stores/modules/member";
const userStore = useMemberStore();
const firstStore = useFirstListStore();
const secondStore = usesecondListStore();
const firstanimation: any = ref(null);
const secondanimation: any = ref(null);
const active: any = ref("first"); //当前列表
const searchParam: any = ref(""); //搜索参数
const GoodsType: any = ref(""); //物资类型
const BoxCode: any = ref(""); //库位
const BoxName: any = ref(""); //库位名称
const GodownCode: any = ref(userStore.GodownCode); //仓库
const day: any = ref("");
const time: any = ref("");
const week: any = ref("");
const range: any = [
  { value: 20, text: "20条/页" },
  { value: 40, text: "40条/页" },
  { value: 60, text: "60条/页" },
];
//库位列表树选择器
const treePicker: any = ref(null);
const selectChange = (e: any, n: any) => {
  console.log("库位选择", e, e[0], n);
  userStore.swiperDots = true;
  BoxCode.value = e[0];
  BoxName.value = n;
};
const cancelTreePicker = () => {
  userStore.swiperDots = true;
};
const clearBoxName = () => {
  BoxCode.value = "";
  BoxName.value = "";
};
//打开库位列表树选择器
const openTreePicker = () => {
  treePicker.value._show();
  userStore.swiperDots = false;
};
//仓库
const change = (e: any) => {
  userStore.changeStash(e);
  console.log("切换仓库", e);
};
//地址配置
const goSetSA = () => {
  uni.navigateTo({
    url: "/pages/login/login",
  });
};
//切换列表
const changeList = (type: any) => {
  active.value = type;
  handlePageChange({});
};
onMounted(() => {
  setInterval(() => {
    getData();
  }, 1000);
  search();
});
//获取时间
const getData = async () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const dayNum = date.getDate();
  const dayStr = dayNum < 10 ? `0${dayNum}` : dayNum;
  const monthStr = month < 10 ? `0${month}` : month;
  const timeStr = `${year}-${monthStr}-${dayStr}`;
  //时 getHours()：(0 ~ 23)
  var hour = date.getHours();
  //分 getMinutes()： (0 ~ 59)
  var minute = date.getMinutes();
  //秒 getSeconds()：(0 ~ 59)
  var second = date.getSeconds();
  const addZero = (s: any) => {
    return s < 10 ? "0" + s : s;
  };
  const weekArr = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  const weekNum = date.getDay();
  const weekStr = weekArr[weekNum];
  day.value = timeStr;
  time.value = addZero(hour) + ":" + addZero(minute) + ":" + addZero(second);
  week.value = weekStr;
};
//查询
const search = () => {
  handlePageChange({});
};
const firstPageNum = ref(1);
const firstPageSize = ref(20);
const secondPageNum = ref(1);
const secondPageSize = ref(20);
const handlePageChange = async (e: any) => {
  console.log(e);
  if (active.value === "first") {
    if (e.pageNum) {
      firstPageNum.value = e.pageNum || 1;
      firstPageSize.value = e.pageSize || 20;
    }
    firstStore.getFirstList({
      pageNum: e.pageNum || firstPageNum.value,
      pageSize: e.pageSize || firstPageSize.value,
      searchParam: searchParam.value || "",
      GoodsType: GoodsType.value || "",
      BoxCode: BoxCode.value || "",
    });
  } else if (active.value === "second") {
    if (e.pageNum) {
      secondPageNum.value = e.pageNum;
      secondPageSize.value = e.pageSize;
    }

    secondStore.getSecondList({
      pageNum: e.pageNum || secondPageNum.value,
      pageSize: e.pageSize || secondPageSize.value,
      searchParam: searchParam.value || "",
      GoodsType: GoodsType.value || "",
    });
  }
};
</script>

<style lang="scss" scoped>
#inventoryStatistics {
  height: 100%;
  width: 100%;
  color: #fff !important;
  user-select: none;
  -webkit-user-select: none;
  ::v-deep .uni-select {
    border-color: #047f86;
    .uni-select__input-text {
      color: #00f4e0;
    }
    .uni-icons {
      color: #00f4df !important;
    }
    .uni-select__selector {
      background-color: #0c1d25;
      border-color: #0c1d25;
    }
    .uni-select__selector-item {
      color: #00f4dfcc;
      &:hover {
        background-color: #174c54;
      }
    }
    .uni-popper__arrow_bottom,
    .uni-popper__arrow_top {
      border-bottom-color: #0c1d25;
      border-top-color: #0c1d25;
      &::after {
        border-bottom-color: #0c1d25;
        border-top-color: #0c1d25;
      }
    }
  }
  header {
    height: 6%;
    position: relative;
    background-size: 100%;

    image {
      position: absolute;
      height: 100%;
      width: 100%;
    }

    #top {
      text-align: center;
      justify-content: space-around;
      display: flex;
      align-items: center;
      font-family: PangMenZhengDao;
      font-size: 30px;
      height: 100%;
      color: #ffffff;
      position: relative;
    }

    .time {
      position: absolute;
      top: 15%;
      left: 20%;
      display: flex;
      align-items: center;

      .h_s {
        padding: 0 10px;
        font-family: DIN-Bold;
        font-size: 16px;
        border-right: 2px solid rgba(169, 255, 254, 0.15);
      }

      .day {
        font-size: 14px;
        padding: 0 10px;
        color: #bac3c4;
      }
    }

    .handle_box {
      position: absolute;
      right: 5%;
      top: 20%;
      width: 15%;
      ::v-deep .uni-select {
        border: 0;
        .uni-select__input-text {
          color: #ffffff;
          font-size: 14px;
        }
        .uni-icons {
          color: #ffffff !important;
        }
      }
      .select,
      .Address {
        height: 50px;
        display: flex;
        align-items: center;
        padding: 0 5px;
        background: url("@/static/img/largeScreen/warehouse-bg.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
      }
      .select {
        width: 300px;
      }
      .Address {
        justify-content: center;
        width: 120px;
      }
    }
  }
  #list_box {
    height: calc(100% - 6%);
    width: 100%;
    padding: 20px;
    .content {
      height: 100%;
      width: 100%;
    }
    .list_title {
      height: 60px;
      justify-content: space-between;
      align-items: center;
      .Btn {
        width: 180px;
        height: 60px;
        background-color: hsla(0, 0%, 0%, 0.35);
        border-radius: 14px 14px 0px 0px;
        color: rgba(255, 255, 255, 0.35);
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        &:hover {
          background-color: rgba(11, 79, 87, 0.35);
        }
        &.active {
          background-color: rgba(11, 79, 87, 0.35);
        }
      }
      .title_right {
        justify-content: space-between;
        .select {
          width: 160px;
          margin: 0 20px;
        }
        .Location {
          width: 100%;
          height: 35px;
          border: 1px solid #047f86;
          border-radius: 4px;
          justify-content: space-between;
          padding: 0 8px;
          .text {
            width: 80%;
            height: 100%;
            color: #00f4e0;
            line-height: 35px;
          }
        }
        .input {
          width: 200px;
          margin: 0 20px;
        }
      }
      ::v-deep .uni-easyinput {
        .uni-easyinput__content {
          border-color: #047f86 !important;
          background-color: transparent !important;
        }
        .uni-easyinput__content-input {
          color: rgba(0, 244, 224, 0.8) !important;
        }
        .uni-icons {
          color: #00f4e0 !important;
        }
      }
    }
    .list {
      width: 100%;
      padding: 0 20px;
      height: calc(100% - 60px);
      background-color: rgba(11, 79, 87, 0.35);
      .table_box {
        padding: 16px 0 0 0;
        height: 100%;
        width: 100%;
        .table_header_item {
          width: 100%;
          background-color: #081d25;

          .title {
            color: #00f4df;
            font-family: HarmonyOS Sans SC;
            font-size: 14px;
            text-align: center;
          }
        }
        scroll-view {
          height: calc(100% - 84px);
          .table_body {
            width: 100%;
            height: 100%;
            .table_body_item {
              border-bottom: 1px solid rgba(244, 244, 244, 0.2);
              &:hover {
                background-color: rgba(76, 180, 218, 0.2);
              }
            }
            .table_body_item_cell {
              text-align: center;
              color: #cee1de;
            }
          }
        }
        .table_header_item,
        .table_body_item {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          grid-template-rows: 40px;
          align-items: center;
          padding: 0 10px;
        }
        &.second_table_box {
          .table_header_item,
          .table_body_item {
            grid-template-columns: repeat(9, 1fr) !important;
          }
        }
      }
    }
  }
}
</style>
